<template>
  <div class="view-fill">
    <div class="app-container-flex">
      <NewFullScreen
        v-model="showDialog"
        :title="title"
        :btnList="fullInfo.btnList"
      >
        <div class="model-panel">
          <div class="model-panel-title">
            <p>{{ $t('basic_information') }}</p>
          </div>
          <div class="model-panel-body">
            <page-form
              class="paddingBox order-model-formBox flex_wrap_start_start"
              v-model:ref-obj="formInfo.ref"
              :data="formInfo.data"
              :field-list="formInfo.fieldList"
              :rules="formInfo.rules"
              :label-width="formInfo.labelWidth"
              :list-type-info="listTypeInfo"
            >
              <template v-slot:form-routeResponseUserName>
                <el-input
                  v-model="formInfo.data.routeResponseUserName"
                  class="not-mongolia"
                  type="input"
                  :disabled="true"
                  placeholder="请选择负责人"
                >
                  <template #append>
                    <el-icon @click="openUserList"><MoreFilled /></el-icon>
                  </template>
                </el-input>
              </template>
            </page-form>
          </div>
        </div>
      </NewFullScreen>
    </div>
    <SelectUsers
      v-if="selectUserInfo.visible"
      v-model:showDialog="selectUserInfo.visible"
      :query="selectUserInfo.query"
      :api="getRrgUserList"
      :saveEmpty="true"
      :check-box="false"
      :highlight-row="true"
      @callback="selectUserCallBack"
    />
  </div>
</template>

<script setup name="patrolRouteModify">
import {
  createPatrolRoute,
  getPatrolRouteById,
  updatePatrolRoute,
} from '@/api/core'
import SelectUsers from '@/components/SelectUsers/index'
import { getRrgUserList } from '@/api/base.js'

const { proxy } = getCurrentInstance()
const emits = defineEmits()
const props = defineProps(['visible', 'title', 'id', 'type'])

const fullInfo = ref({
  btnList: [{ label: '保存', event: save, show: true }],
})
// 表单相关
const formInfo = ref({
  ref: null,
  data: {
    routeResponseUserName: '',
    routeResponseUser: '',
  },
  fieldList: [
    {
      label: '名称',
      value: 'routeName',
      type: 'input',
      maxlength: 32,
    },
    {
      label: '负责人',
      value: 'routeResponseUserName',
      type: 'slot',
    },
    {
      label: '联系电话',
      value: 'contactsPhone',
      type: 'input',
    },
    {
      label: '描述',
      value: 'description',
      type: 'textarea',
    },
  ],
  rules: {
    routeName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
    routeResponseUserName: [
      { required: true, message: '请输入负责人', trigger: 'change' },
    ],
    contactsPhone: [{ validator: proxy.$validate.cellphone, trigger: 'blur' }],
  },
  labelWidth: '120px',
})
const selectUserInfo = ref({
  visible: false,
  saveEmpty: true,
  query: {
    deptAuth: 1,
  },
})
// 相关列表
const listTypeInfo = ref({})

const showDialog = computed({
  get() {
    return props.visible
  },
  set(newValue) {
    emits('update:visible', newValue) // 更新父组件visible
  },
})

onMounted(() => {
  if (props.id) {
    getMain()
  }
})

function openUserList() {
  selectUserInfo.value.visible = true
}
function selectUserCallBack(data = undefined) {
  if (data && data.id) {
    formInfo.value.data['routeResponseUser'] = data.id
    formInfo.value.data['routeResponseUserName'] = data.name
    formInfo.value.data['contactsPhone'] = data.tel
  } else {
    formInfo.value.data['routeResponseUser'] = ''
    formInfo.value.data['routeResponseUserName'] = ''
    formInfo.value.data['contactsPhone'] = ''
  }
}
function tableRowClassName({ row = undefined }) {
  if (row.isChoice) {
    return 'success-row'
  } else {
    return ''
  }
}
function showFieldListItem(show, nameValue) {
  let fieldList = formInfo.value.fieldList
  fieldList.map((item) => {
    if (item.value === nameValue) {
      item.show = show
    }
  })
}
function disableFieldListItem(disabled, nameValue) {
  let fieldList = formInfo.value.fieldList
  fieldList.map((item) => {
    if (item.value === nameValue) {
      item.disabled = disabled
    }
  })
}
function save() {
  const _formInfo = formInfo.value
  formInfo.value.ref.validate((valid) => {
    if (valid) {
      let api
      const params = _formInfo.data
      const type = props.type
      if (type === 'create') {
        api = createPatrolRoute
      } else if (type === 'update') {
        api = updatePatrolRoute
      } else {
        return
      }
      proxy.$handleAPI(type, api, params).then((res) => {
        if (res.success) {
          showDialog.value = false
          emits('returnBack', true)
        }
      })
    }
  })
}
function getMain() {
  getPatrolRouteById(props.id).then((resp) => {
    if (resp && resp.success) {
      formInfo.value.data = resp.data
    }
  })
}
</script>

<style scoped lang="scss">
.flex {
  display: flex;
  flex: 1;
}

.flex-select :deep(.el-input--small) .el-input__inner {
  height: 28px !important;
}
:deep(.el-form-item__content) {
  display: flex;
}
</style>
